<template>
	<w-container :loading="loading" bgColor="#fff" style="padding-bottom: 200rpx;">
		<w-navbar :placeholder="false" navType="goods" :title='pageTitle' :bgColor="bgColor" :opacity="opacity"
			:leftIconSize="32" :leftIcon="opacity>0.8?'arrow-left-back':'arrow-left-back'"
			:titleStyle="{color:opacity>0.8?'#222':'#fff'}" :product="product">
		</w-navbar>
		<view class="main-img">
			<u-status-bar></u-status-bar>
			<view class="img">
				<w-image :src="product.main_image" :width="375" :height="292"></w-image>
			</view>
		<!-- 	<view class="navBar"> 
				<w-icon name="arrow-left" :size="34" @click="backPage"></w-icon>
				<w-icon :name="product.is_like?'market_like':'market_no_like'" :size="34" @click="targetLike"></w-icon>
			</view> -->
			<view class="product_img">
				<w-image :src="product.main_image" :width="110" :height="110" :radius="12"></w-image>
			</view>
			<view class="product_name">{{ product.name }}</view>
			<view class="flex-center cj">
				<w-tag size="yellow" name="限量" class="mr-6" :value="product.total_num + '份'"></w-tag>
				<w-tag size="yellow" v-if="product.flux" name="流通" class="ml-6" :value="product.flux + '份'"></w-tag>
			</view>
		</view>
		<view class="typeList">
			<!-- <u-tabs :list="typeList" keyName="name" lineColor="#EA1F15" :lineWidth="32" :lineHeight="3"
				inactiveStyle="color:#999999" activeStyle="color:#000;font-weight: 500"
				@click="cutType=$event.type;refreshList()"></u-tabs> -->
			<w-tabs scrollable :tabList="typeList" @change="cutType=$event.type;refreshList()" :activeStyle="{color:'#000'}"></w-tabs>
		</view>
		<block v-if="cutType=='market'">
			<view class="filter flex-center-sb">
				<view class="marketType">
					<view v-for="item in marketType" :key="item.type" :class="{action:cutMarketType==item.type}"
						@click="handMarketType(item)">
						<text>{{ item.name }}</text>
						<w-icon name='lock' :size="8" class="ml-5" v-if="!product.is_buy&&item.type=='buy'"></w-icon>
					</view>
				</view>
				<!-- buy -->
				<view v-if="['consignment'].includes(cutMarketType)" class="flex-center">
					<view v-for="item in getSortList" :key="item.key" class="flex-center ml-16" @click="handSolt(item)">
						<text class="mr-4 font-size-13"
							:style="{color:item.key!=parame.sort?'#999':'#000'}">{{ item.title }}</text>
						<w-icon name="sort" size="10" v-if="item.key!=parame.sort"></w-icon>
						<w-icon name="sort-active" size="10" v-else :class="{'sortDesc':parame.order=='desc'}"></w-icon>
					</view>
				</view>
			</view>
			<MarketList v-if="cutMarketType=='consignment'" :product="product" :list="list" :goodsType="goodsType" :loadingType="loadingType">
			</MarketList>
			<MarketBuy v-if="cutMarketType=='buy'" :product="product" :list="list" :loadingType="loadingType">
			</MarketBuy>
			<sellRecord v-if="cutMarketType == 'transaction'" :list="list" :loadingType="loadingType"/>
			<Contracts v-if="cutMarketType=='entrusted'" :product="product" :contractsTatal="contractsTatal" :list="list"
				:loadingType="loadingType" />
		</block>
		<NoticeList v-if="cutType=='notice'" :list="list" :loadingType="loadingType"></NoticeList>
	</w-container>
</template>

<script>
	// 接口数据
	import {
		isCollect
	} from "@/api/collection/index.js";
	import {
		getMarketGoodsInfo,
		getMarketGoodsList,
		entrustList
	} from "@/api/market/index.js";
	import {
		fastCreateOrder
	} from "@/api/order/index.js";
	import {
		getBegBuyList,
		getSellInfo
	} from '@/api/trad/index.js'
	import {
		getNoticeList
	} from "@/api/notice/index.js"
	import opacityMixin from '@/mixins/opacityNav.js'
	// 组件
	import MarketList from './components/MarketList.vue'
	import MarketBuy from './components/MarketBuy.vue'
	import NoticeList from './components/NoticeList.vue'
	import sellRecord from './components/sellRecord.vue'
	import Contracts from './components/Contracts.vue'
	export default {
		components: {
			MarketList,
			MarketBuy,
			NoticeList,
			sellRecord,
			Contracts
		},
		mixins: [opacityMixin],
		data() {
			return {
				loading: false,
				id: null,
				goodsType: null,
				product: {},
				cutType: 'market',
				typeList: [{
						type: 'market',
						name: '市场价格'
					},
					{
						type: 'notice',
						name: '相关公告'
					}
				],
				cutMarketType: 'consignment',
				marketType: [{
						type: 'consignment',
						name: '寄售'
					},
					{
						type: 'buy',
						name: '求购'
					},
					// {
					// 	type: 'transaction',
					// 	name: '成交'
					// },
					// {
					// 	type: 'entrusted',
					// 	name: '委托'
					// }
				],
				sortList: [{
						title: "价格",
						key: "price",
						order: "asc",
					},
					{
						title: "编号",
						key: "collection_code",
						order: "desc",
					}
				],
				loadingType: "none",
				parame: {
					page: 1,
					type: 2,
					sort: 'price',
					order: 'asc'
				},
				list: [],
				contractsTatal:0,
				
			};
		},
		computed: {
			getSortList() {
				if (this.cutMarketType == 'buy') {
					return this.sortList.filter(item => item.key == 'price')
				} else {
					return this.sortList
				}
			}
		},
		onLoad({
			id,
			goodsType
		}) {
			this.id = id;
			this.parame.id = id;
			this.goodsType = goodsType;
			this.loading = true;
			this.getInfo();
			this.getMarketList();
		},
		onPullDownRefresh() {
			this.getInfo();
			this.refreshList();
		},
		methods: {
			async getInfo() {
				try {
					let {
						data
					} = await getMarketGoodsInfo({
						id: this.id,
						type: this.goodsType
					});
					this.product = data;
					this.product.goods_type = this.goodsType;
				} catch (err) {
					console.log(err)
				} finally {
					uni.stopPullDownRefresh();
					this.loading = false;
				}
			},
			targetLike() {
				if (!this.isLogin) {
					return uni.$emit("showLogin");
				}
				let type = this.product.is_like > 0 ? 0 : 1;
				isCollect(this.product.is_like, {
					types: this.product.goods_type,
					id: this.product.id,
				}).then((res) => {
					uni.showToast({
						icon: "none",
						title: res.msg,
					});
					this.product.is_like = type;
				});
			},
			handMarketType(item) {
				if (item.type == 'buy' && !this.product.is_buy) return;
				if (item.type == 'buy') {
					this.parame.order = 'desc'
				} else {
					this.parame.order = 'asc'
				}
				this.cutMarketType = item.type;
				this.refreshList()
			},
			// 公告
			async getNoticeList() {
				try {
					const res = await getNoticeList({
						search: this.product.name,
						page: this.parame.page
					})
					this.list = [...this.list, ...res.data.data]
					if (!!res.data.data.length) {
						this.parame.page++;
					}
					this.loadingType = 'nomore'
				} catch (err) {
					console.log(err)
				} finally {
					!this.list.length && (this.loadingType = "empty");
					uni.stopPullDownRefresh();
				}
			},
			//获取成交记录
			async transactionRecord(){
				if (this.loadingType == "loading") return;
				this.loadingType = "loading";
				try {
					const res = await getSellInfo({
						page: this.parame.page,
						goods_id: this.id,
						status:1
					})
					this.list = [...this.list, ...res.data.list]
					if (!!res.data.list.length) {
						this.parame.page++;
					}
					this.loadingType = 'nomore'
				} catch (err) {
					console.log(err)
				} finally {
					!this.list.length && (this.loadingType = "empty");
					uni.stopPullDownRefresh();
				}
			},
			// 寄售
			async getMarketList() {
				if (this.loadingType == "loading") return;
				this.loadingType = "loading";
				try {
					const res = await getMarketGoodsList(this.parame)
					
					this.list = [...this.list, ...res.data.list].reduce((acc, current) => {
						const foundIndex = acc.findIndex(item => item.id === current.id);
						if (foundIndex !== -1) {
							acc[foundIndex] = current;
						} else {
							acc.push(current);
						}
						return acc;
					}, []);
					
					if (!!res.data.list.length) {
						this.parame.page++;
					}
					this.loadingType = 'nomore'
				} catch (err) {
					console.log(err)
				} finally {
					!this.list.length && (this.loadingType = "empty");
					uni.stopPullDownRefresh();
				}
			},
			// 求购
			async getBuyList() {
				if (this.loadingType == "loading") return;
				try {
					this.loadingType = "loading";
					const res = await getBegBuyList({
						collection_id: this.id,
						page: this.parame.page,
						sort: this.parame.order,
					})
					this.list = [...this.list, ...res.data.data].reduce((acc, current) => {
						const foundIndex = acc.findIndex(item => item.id === current.id);
						if (foundIndex !== -1) {
							acc[foundIndex] = current;
						} else {
							acc.push(current);
						}
						return acc;
					}, []);
					if (!!res.data.data.length) {
						this.parame.page++;
					}
					this.loadingType = 'nomore'
				} catch (err) {
					console.log(err)
				} finally {
					!this.list.length && (this.loadingType = "empty");
					uni.stopPullDownRefresh();
				}
			},
			//委托
			async getContractsList(search) {
				if (this.loadingType == "loading") return;
				try {
					this.loadingType = "loading";
					const res = await entrustList({
						collection_id: this.id,
						page: this.parame.page
					})
					this.contractsTatal = res.data.total_number
					this.list = this.list.concat(res.data.data.data)
					if (res.data.data.total == 0) {
						return this.loadingType = 'empty'
					}					
					
					if (!!res.data.data.data.length) {
						this.parame.page++;
					}
					this.loadingType = 'nomore'
				} catch (err) {
					console.log(err)
				} finally {
					!this.list.length && (this.loadingType = "empty");
					uni.stopPullDownRefresh();
				}
			// 	if (this.contractsLoadingType == 'loading' || this.contractsLoadingType == 'nomore') return;
			// 	this.contractsLoadingType = 'loading'
			// 	entrustList({
			// 		...search,
			// 		collection_id: this.id
			// 	}).then(res => {
			// 		this.contractsLoadingType = 'none'
			// 		this.contractsTatal = res.data.total_number
			// 		if (res.data.data.data.length) {
			// 			this.contractsSearch = search;
			// 			res.data.data.data.map(v => {
			// 				this.$set(this.contractsList, this.contractsList.length, v)
			// 			})
			
			// 		}
			// 		if (res.data.data.data.length < 1 && search.page == 1) {
			// 			this.contractsLoadingType = 'empty'
			// 		}
			// 	}).finally(() => {
			// 		uni.stopPullDownRefresh()
			// 	})
			},
			// 排序
			handSolt(item) {
				if (item.key == this.parame.sort) {
					this.parame.order = this.parame.order == 'asc' ? 'desc' : 'asc'
				} else {
					this.parame.sort = item.key;
					this.parame.order = item.order;
				}
				this.refreshList()
			},
			// 刷新列表
			refreshList() {
				this.list = [];
				this.parame.page = 1;
				this.handleMoreFunction()
			},
			handleMoreFunction(){
				if (this.cutType == 'notice') {
					this.getNoticeList();
				} else {
					if (this.cutMarketType == 'consignment') {
						this.getMarketList();
					}else if(this.cutMarketType == 'transaction'){
						this.transactionRecord()
					}else if(this.cutMarketType == 'entrusted'){
						this.getContractsList()
					} else {
						this.getBuyList();
					}
				}
			}
		},
		onReachBottom() {
			if(this.cutMarketType == 'transaction') return
			this.handleMoreFunction()  
		}	
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.cj {
		position: relative;
		z-index: 1;
	}

	.main-img {
		width: 750rpx;
		min-height: 200rpx;
		padding: 30rpx 32rpx 60rpx;
		position: relative;

		.navBar {
			@extend .flex-center-sb, .cj;
			width: 100%;
			height: 88rpx;
		}

		.img {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;

			&:before {
				content: '';
				width: 100%;
				height: 100%;
				background: linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, .9), rgba(255, 255, 255, 1));
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
		}

		.product_img {
			width: fit-content;
			padding: 10rpx;
			border-radius: 30rpx;
			background: linear-gradient(to bottom, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
			margin: 24rpx auto 0;
			@extend .cj;
		}

		.product_name {
			font-size: 36rpx;
			color: #222;
			font-weight: 500;
			text-align: center;
			margin: 24rpx 0;
			@extend .cj;
		}
	}

	.typeList {
		padding: 0 32rpx;
		border-bottom: 2rpx solid #F5F5F5;

		/deep/.u-tabs__wrapper__nav__line {
			bottom: 0;
		}
	}

	.filter {
		width: 100%;
		padding: 24rpx 32rpx 0;
	}

	.marketType {
		background-color: #F5F5F5;
		border-radius: 64rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 4rpx;

		>view {
			width: 120rpx;
			height: 50rpx;
			color: #666666;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.action {
			background-color: #fff;
			color: $theme-color;
			font-weight: 500;
			border-radius: 64rpx;
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
		}
	}

	.sortDesc {
		transform: rotate(180deg);
	}
	/deep/ .u-tabs__wrapper__nav__item {
		padding: 0 8px !important;
	}
</style>